jQuery.mobile.getInheritedTheme()


jQuery.mobile.getInheritedTheme( el, defaultTheme )Returns: Stringversion deprecated: 1.4.0

Description: Retrieves the theme of the nearest parent that has a theme assigned.

  • jQuery.mobile.getInheritedTheme( el, defaultTheme )

    • el
      Type: jQuery
      A jQuery collection object containing an element for which the inherited theme is to be determined.
    • defaultTheme
      Type: String
      The color scheme (swatch) to apply if no theme is found on any of the parents. It accepts a single letter from a-z that maps to the swatches included in your theme.

      Possible values: swatch letter (a-z).

This method is no longer useful, since theme inheritance is implemented entirely in CSS as of jQuery Mobile 1.4.0.

Example:

Retrieve the inherited theme for an element

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery.mobile.getInheritedTheme demo</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
</head>
<body>
<script>
$.mobile.document.on( "click", "#check-theme", function() {
alert( "I inherit theme '" +
$.mobile.getInheritedTheme( $( this ), "x" ) + "'" );
});
</script>
<div data-role="header">
<h2>jQuery Mobile Example</h2>
</div>
<div role="main" class="ui-content">
<p>Click the button below to find out what theme it inherits.</p>
<a href="#" id="check-theme" class="ui-btn ui-corner-all ui-shadow">Check my theme</a>
</div>
</body>
</html>

Demo: